<template>
  <div class="home">
    <dv-loading v-if="isShow">
      <p>数据加载中......</p>
    </dv-loading>
    <div class="content" v-if="!isShow">
      <header-view />
      <div class="lin"></div>
      <div>
        <el-row>
          <el-col :span="13">
            <div class="left">
              <left-view />
            </div>
          </el-col>
          <el-col :span="11">
            <div class="right">
              <right-view />
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="bom">
        <dv-decoration-10 style="width: 100%; height: 5px" />
      </div>
    </div>
  </div>
</template>

<script>
import HeaderView from "./components/header/index";
import LeftView from "./components/left/index";
import RightView from "./components/right/index";

// @ is an alias to /src
export default {
  components: { HeaderView, LeftView, RightView },
  data() {
    return {
      isShow: true,
      trme: null,
    };
  },
  beforeDestroy() {
    clearInterval(this.trme);
  },
  mounted() {
    // console.log(window.innerHeight);
    // window.addEventListener("resize", this.handleResize, true);
    this.trme = setInterval(() => this.$store.dispatch("queryObj"), 10000);
    setTimeout(() => {
      this.isShow = false;
    }, 4000);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.handleResize);
  },
  methods: {
    handleResize() {
      const el = document.getElementsByClassName("content");
      if (this.trme) clearTimeout(this.trme);

      if (window.innerHeight < 1080) {
        this.trme = setTimeout(() => {
          let num = Math.floor((window.innerHeight / 1080) * 1000000) / 1000000;
          el[0].style.transform = `scale(${num})`;
          el[0].style.webkitTransform = `scale(${num})`;
        }, 500);
      } else {
        this.trme = setTimeout(() => {
          el[0].style.transform = `scale(1)`;
          el[0].style.webkitTransform = `scale(1)`;
        }, 500);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.home {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: url(./../../assets/datav/bg.png) no-repeat;
  background-size: 100% 100%;
  background-attachment: fixed;
  display: flex;
  justify-content: center;

  p {
    color: #fff;
    font-size: 26px;
  }

  .content {
    width: 90vw;
    height: 100vh;
    background: url(./../../assets/datav/bg.png) no-repeat;
    background-size: 100% 100%;
    background-attachment: fixed;
    overflow: hidden;

    .lin {
      width: 100%;
      height: 15px;
      background: url(./../../assets/datav/headerbg.png) no-repeat;
      background-size: 100% 100%;
      margin-bottom: 5px;
    }

    .right {
      margin-left: 5px;
    }

    .bom {
      width: 100%;
      height: 35px;
      display: flex;
      align-items: center;
    }
  }
}
</style>
